﻿<!doctype html />
<html>
    <head>
        <title>Timeline</title>
        <!-- gdata code -->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">

            google.load("gdata", "2.x", { packages: ['calendar'] });
            google.load('jquery', '1.4.4');

            var SCOPE = 'https://www.google.com/calendar/feeds';

            function login(){
                var token = google.accounts.user.login(SCOPE);
            }

            function logout(){
                google.accounts.user.logout();
                // remove calendars
            }

            function setupLogin(){
                $("#logout").attr('disabled', 'disabled');
                $("#login").removeAttr('disabled');
            }

            function setupLogout(){
                $("#login").attr('disabled', 'disabled');
                $("#logout").removeAttr('disabled');
            }

            google.setOnLoadCallback(function () {
                var status = google.accounts.user.getStatus(SCOPE);

                if (status == google.accounts.AuthSubStatus.LOGGING_IN) {
                    $("#log").text("Loggin in");
                    return;
                } else if (status == google.accounts.AuthSubStatus.LOGGED_OUT) {
                    setupLogin();
                    $("#log").text("Logged out");
                    return;
                } else {
                    // user is logged in. 
                    // Yay

                    $("#log").text("Logged in");
                }
            });

        </script>


    </head>
    <body>
        <div id="content">
            <a id="login" href="javascript:login()">Log in</a> | <span id="log"></span> | <a id="logout" href="javascript:logout()">Log out</a>



            <!-- there so google and gdata can perform their jobs -->
            <img src="onepixel.png" alt='' />
        </div>
        
    </body>
</html>